<template>
  <div class="body">
    <el-form ref="ruleForm" :rules="rules" :model="mdl" :inline="true" label-width="110px">
        <el-form-item label="设备ID" required>
            <el-input v-model="mdl.relaysHostId" placeholder="请输入设备ID" />
        </el-form-item>
        <el-form-item label="通道数量" required>
            <el-input v-model.trim="mdl.channelNum" type="number" placeholder="请输入通道数量" />
        </el-form-item>
    </el-form>
    <div class="foot_btn">
      <el-button
        type="primary"
        :loading="submitLoading"
        @click="submitForm('ruleForm')"
        >提交</el-button
      >
      <el-button @click="handleCloseDrawer">取消</el-button>
    </div>
  </div>
</template>

<script>
import { addRelays } from "@/api/user";
export default {
  name: "FormModel",
  props: {
    mdl: {
      type: Object,
      required: true,
    },
    handleCloseDrawer: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
        submitLoading: false,
        rules:{
            account: [
                { required: true, message: "请输入平台账号", trigger: "blur" },
                { pattern: /^[a-zA-z]\w{3,15}$/, message: '只能包含字母、数字', trigger: 'blur' }
            ]
        },
    };
  },
  mounted() {
    
  },
  methods: {
    // 提交
    submitForm() {
      const request = this.mdl.id
        ? updateStore(this.mdl)
        : addRelays(this.mdl);
      request
        .then((res) => {
          if (res.statusCode === "00000") {
            this.$message({ message: "提交成功", type: "success" });
            // 关闭弹窗
            this.handleCloseDrawer();
            // 调用父级组件刷新数据
            this.$emit("getList");
          }
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.map {
  width: 700px;
  height: 400px;
}
.body {
  padding-right: 25px;
  position: relative;
  .showImg {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .goLocaton {
    position: absolute;
    top: 0;
    left: 980px;
  }
  .foot_btn {
    width: 150px;
    margin: 0 auto;
  }
}

/deep/ .el-checkbox__label {
  font-size: 12px;
}
</style>
